<script setup>
import VuePdfEmbed from 'vue-pdf-embed'
import { ref, onMounted } from 'vue'
import { Printer } from '@element-plus/icons-vue'
import { ElLoading } from 'element-plus'

// optional styles
import 'vue-pdf-embed/dist/styles/annotationLayer.css'
import 'vue-pdf-embed/dist/styles/textLayer.css'
import { useRouter } from 'vue-router'
const router = useRouter()
// either URL, Base64, binary, or document proxy
const pdfSource = ref()
const vuePdfRef = ref()
const myQuillEditor = ref()
const data = ref({})

onMounted(async () => {
  const id = router.currentRoute.value.query.id
  let tableName = router.currentRoute.value.query.tableName
  if (id) {
    data.value = await getDataById(tableName, id)
  }
})

async function onEditorReady(quill) {}

async function onEditorChange({ quill, html, text }) {
  console.log('Editor content changed', quill, html, text)
}

async function onTextChange(delta, oldDelta, source) {
  if (data.value) {
    const loadingInstance = ElLoading.service({})
    try{
      const quill = myQuillEditor.value.getQuill()
      data.value.text = quill.getText()
      console.log(data.value)  

      if(data.value.kssj){
        // 解析kssj,jssj的yyyy-mm-dd HH:mm:ss格式 中的年月日时分，并赋值给data.value.kssj_y,kssj_m,kssj_d,kssj_h,kssj_m
        const kssj = data.value.kssj.split(" ")[0].split("-")
        data.value.kssj_y = kssj[0]
        data.value.kssj_m = kssj[1]
        data.value.kssj_d = kssj[2]
        data.value.kssj_h = data.value.kssj.split(" ")[1].split(":")[0]
        data.value.kssj_mi = data.value.kssj.split(" ")[1].split(":")[1]
      }

      if(data.value.jssj){
        // 解析kssj,jssj的yyyy-mm-dd HH:mm:ss格式 中的年月日时分，并赋值给data.value.kssj_y,kssj_m,kssj_d,kssj_h,kssj_m
        const jssj = data.value.jssj.split(" ")[0].split("-")
        data.value.jssj_y = jssj[0]
        data.value.jssj_m = jssj[1]
        data.value.jssj_d = jssj[2]
        data.value.jssj_h = data.value.jssj.split(" ")[1].split(":")[0]
        data.value.jssj_mi = data.value.jssj.split(" ")[1].split(":")[1]
      }
      let result = await window.operation.getPDF({...data.value})
      pdfSource.value = result
    }catch(e){ 
      console.log(e)
    }finally{
      loadingInstance.close()
    }
    
  }
}

async function getDataById(tableName, id) {
  let res = await window.db.select(`select * from ${tableName} where id=${id}`)
  if (res.length == 0) {
    return null
  }
  return res[0]
}

// 打印 PDF
function printPdf() {
  vuePdfRef.value?.print(300, 'output.pdf', true) // 打印所有页面
}

function pdfRendered() {
  //查询class 为 vue-pdf-embed__page 下的canvas元素
  const canvas = document.querySelectorAll('.vue-pdf-embed__page canvas')
  if(canvas.length == 0){
    return
  }
  //获取canvas的样式宽度
  const style = getComputedStyle(canvas[0])
  const width = style.width
  console.log(width)
  //设置canvas为当前宽度减去100px
  canvas.forEach(item => {
    item.style.width = `${parseInt(width) - 100}px`
  })
 
}
</script>

<template>
  <div style="height: 100%">
    <el-button type="primary" :icon="Printer" @click="printPdf()">打印</el-button>

    <div style="overflow-y: scroll; overflow-x: hidden; height: 95%">
      <VuePdfEmbed annotation-layer text-layer :source="pdfSource" ref="vuePdfRef" @rendered="pdfRendered"/>
    </div>
    <div style="display: none">
      <QuillEditor
        theme="snow"
        v-model:content="data.blnr"
        content-type="html"
        ref="myQuillEditor"
        @ready="onEditorReady($event)"
        @change="onEditorChange($event)"
        @text-change="onTextChange($event)"
      />
    </div>
  </div>
</template>

<style scoped>
:deep(.vue-pdf-embed)>div{
  background-color: #808080;
  padding: 40px;
}
</style>